import React, { Component, Suspense } from 'react'
import { NavLink, withRouter } from 'react-router-dom'
import RouterView from '../router/router'
import rules from '../router/rules'

import { Spin } from 'antd'
import 'antd/lib/spin/style/index.css'

class Layout extends Component {
    render() {
        return (
            <>
                <Suspense fallback={<div style={{textAlign:'center'}}><Spin/></div>}>
                    <RouterView routes={rules}></RouterView>
                </Suspense>
                {
                    this.props.location.pathname !== "/goods_detail" ? <div className="tabbar">
                        <NavLink activeClassName="router-link-active" className="icon icon-home" to="/home">
                            商城
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cate" to="/cate">
                            分类
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-cart" to="/cart">
                            <span className="badge">5</span>
                            购物车
                        </NavLink>
                        <NavLink activeClassName="router-link-active" className="icon icon-user" to="/uncenter">
                            我的
                        </NavLink>
                    </div> : ""
                }
            </>
        )
    }
}


export default withRouter(Layout)